<script setup>

import {goService} from "../../tools/go";
const list = [
  {id:"1",name:"中撒谎滴哦文化的",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:"2",name:"中撒谎滴哦文化的",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:"3",name:"中撒谎滴哦文化的",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:"4",name:"中撒谎滴哦文化的",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
]

const list2 = [
  {id:"1",name:"的话阿",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:"2",name:"的话阿",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:"3",name:"的话阿",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:"4",name:"的话阿",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:"1",name:"的话阿",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:"2",name:"的话阿",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:"3",name:"的话阿",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
  {id:"4",name:"的话阿",img:"src/static/img/indeximg/kjfs/社区新闻2图片.jpg"},
]
</script>

<template>
  <view class="titli">
    <v-icon @click="goService()" class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>社区教育</h3>
  </view>
<!-- 背景 -->
  <view class="bg w">
    <img src="../../static/img/Educatebg.png" alt="">
  </view>
<!-- 热门课程列表 -->
  <view class="popular w">
    <view class="box">
      <h4>热门课程</h4>
      <view>
        <text>更多</text>
        <v-icon icon="mdi-chevron-right"></v-icon>
      </view>
    </view>
<!-- 列表   -->
    <ul class="list">
      <li v-for="(item,index) in list" >
         <img class="img" src="../../static/img/11.png">
        <img :src="item.img">
        <text>{{ item.name }}</text>
      </li>
    </ul>
  </view>
<!-- 人群分类 -->
  <view class="people w">
    <h3>人群分类</h3>
    <ul>
      <li v-for="item in list2">
        <img :src="item.img">
        <text>{{ item.name }}</text>
      </li>
    </ul>
  </view>
</template>

<style scoped lang="scss">
@import "../../static/css/title/index.css";
//人群分类
.people{
  h4{
    font-size: 30px;
    font-weight: 500;
  }
  ul{
    li{

      img{
        width: 45px;
        height: 45px;
      }
      display: flex;
      flex-direction: column;
    }
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    justify-items: center;

  }
  margin-top: 20px;
}
//热门课程
.popular{
  .list{
    li{
      .img{
        position: absolute;
        top: 0px;
        left: 148px;
        width: 34px;
        height: 41px;
      }
      text{
        height: 50px;
        display: block;
        line-height: 40px;
        margin-left: 8px;
      }
      img{
        width: 100%;
        height: 100px;
      }
      width: 100%;
      height: 150px;
      box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      position: relative;
    }
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
    margin-top: 10px;
  }
  //列表
  .box{
    view{
      color: #837f7f;
      display: flex;
      align-items: center;
    }
    h4{
      font-weight: 500;
      font-size: 18px;
    }
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
//  kon
}
//背景
.bg{
  img{
    width: 100%;
    height: 200px;
  }
}
body::-webkit-scrollbar{
  display: none
}
</style>